<template>
  <div class="welfare-pro">
    <div class="section">
      <span class="img"><img :src="info.img" alt=""></span>
      <div class="item">
        <p class="title">{{info.title}}</p>
        <p class="tip">{{info.brief}}</p>
        <div class="cons">
          <div class="item-con">
            <p class="num">{{info.money}}</p>
            <p class="text">用户捐款(元)</p>
          </div>
          <div class="item-con">
            <p class="num">{{info.times}}</p>
            <p class="text">爱心(份)</p>
          </div>
          <div class="item-con">
            <p class="num">{{info.day}}</p>
            <p class="text">项目天数</p>
          </div>
        </div>
      </div>      
    </div>
    <div class="info section-title">
      <p class="info-title">项目说明</p> 
      <div class="item pb0">
        <div class="work" :class="(is_type ? 'active' : '')" v-html="info.content">
          
        </div>
        <div class="more" @click="is_type = !is_type" v-if="!is_type">
          <span>查看更多</span>
          <img src="@/assets/chengrenceshi05.png" alt="">
        </div>
        <div class="more" @click="is_type = !is_type" v-else>
          <span>收回列表</span>
          <img src="@/assets/chengrenceshi09.png" alt="">
        </div>
      </div>
    </div>
    <div class="dynamic section-title">
      <div class="section-top clear">
        <span class="title">项目动态</span>
        <span class="more" @click="router({path: './welfareNewsList', query: {pro_id: info.id}})">查看更多 <img class="arrow" src="@/assets/fanhui01.png" alt=""></span>
      </div>     
      <newsList :newsLists="newLists"></newsList>
    </div>
    <div class="contribu section-title">
      <p class="info-title">捐款记录</p>
      <div class="list">
        <div v-for="item in log" class="item">
          <span class="name">{{item.nickname}}</span>
          <span class="phone">{{item.mobile}}</span>
          <span class="price">捐款<em>{{item.money}}</em>元</span>
        </div>
      </div>
    </div>
    <div class="fixed" @click="show = !show"><span class="btn">我要捐赠</span></div>
    <div v-transfer-dom class="welfare-pro-dialog">
      <popup v-model="show" @click="show = false">
        <p class="title">
          <span>爱心捐款</span>
          <span @click="show = false"><img src="@/assets/gongyizhifu01.png" alt=""></span>
        </p>
        <div class="price-category">
          <div class="flex">
            <div v-for="(item, index) in money" class="item" :class="(itemNum == index) ? 'active' : ''" @click="itemCheck(item, index)">{{item}}元</div>
          </div>
          <div class="custom" :class="(itemNum == 4) ? 'active' : ''"  @click="itemCheck('', 4)">
            <input type="number" v-model="item_money" placeholder="自定义金额">
            <span>元</span>
          </div>
        </div>
        <div class="pay-mode">
          <span class="left">支付方式</span>
          <p class="right">
            <img src="@/assets/gongyizhifu02.png" alt="">
            <span>微信支付</span>
          </p>
        </div>
        <div class="agreement">
          <p class="check-agreement">
            <img v-if="is_agreement" @click="is_agreement = !is_agreement" src="@/assets/gongyizhifu03.png" alt="">
            <img v-else @click="is_agreement = !is_agreement" src="@/assets/gongyizhifu04.png" alt="">
            <span>查看 <em @click="router({path: './donationAgreement'})">《智保天赋爱心捐款协议》</em></span>
          </p>
          <span v-if="is_agreement" class="btn active" @click="donations">我要捐赠</span>
          <span class="btn" v-else>我要捐赠</span>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import {welfarepro, donation} from '@/api/api'
import { TransferDom, Popup, AlertModule } from 'vux'
import newsList from '@/components/newsList'
import { wexinPay } from '@/config/wxpay'
import { commonShare } from "@/config/wxshare"

  export default {
    directives: {
      TransferDom
    },
    components: {
      newsList,
      Popup
    },
    data () {
      return {
        is_type: false,
        show: false,
        itemNum: -1,
        is_agreement: true,
        info:[],
        log:[],
        money:[],
        newLists: [],
        item_money: '',
      }
    },
    created () {
      this.welfarepr()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      itemCheck (item, index) {
        this.itemNum = index
        this.item_money = item
      },
      welfarepr () {
        let id = this.$route.query.id
        welfarepro(id).then((res) =>{
          this.info=res.data.data.info
          this.log=res.data.data.log
          this.money=res.data.data.money
          for(var i in res.data.data.dynamic){
            res.data.data.dynamic[i].type = "pro";
          }
          this.newLists = res.data.data.dynamic
          commonShare(this.info.img, this.info.title, this.info.brief);
        }).catch((err) => {
          console.dir(err)
        })
      },
      donations() {
        var dataJson = {
          id: this.$route.query.id,
          money: this.item_money
        }
        donation(dataJson).then((res) => {
          if(res.data.code == "200"){
            wexinPay(res.data.data.jsapi, (sucRes) => {
              this.router({path: './welfareSuccess'});
            }, (err) => {
              console.dir(err)
            })
          }else if(res.data.code == "731"){
            AlertModule.show({
              title: '温馨提示',
              content: res.data.msg,
              onHide: () => {
                this.router({path: './bindPhone'});
              }
            })
          }else if(res.data.code == "400"){
            AlertModule.show({
              title: '温馨提示',
              content: res.data.msg,
            })
          }
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.welfare-pro
  background-color #f5f5f5
  min-height 100vh
  padding-bottom 5.5rem
  .section
    background-color #fff
    margin-bottom 1rem
    .img
      height 21.1rem
      display flex
      img
        object-fit cover
    .item
      padding 0 1.5rem
      padding-bottom 2rem
      .title
        line-height 5rem
        height 5rem
        font-size 1.7rem
        color #333
        font-weight 800
      .tip
        color #666
        font-size 1.2rem
        margin-bottom 1.5rem
      .cons
        background-color #FAFAFA
        display flex
        border-bottom .2rem solid #172F6D
        padding 1.8rem 0
        border-radius: .6rem .6rem 0px 0px;
        .item-con
          flex 1
          text-align center
          .text
            font-size 1.2rem
            color #999
            line-height 1.2rem
            height 1.2rem
          .num
            font-size 1.7rem
            color #000
            font-weight bold
            line-height 1.7rem
            height 1.7rem
            margin-bottom 1rem
  .section-title
    background-color #fff
    padding 0 1.6rem
    margin-bottom 1rem
    .section-top
      padding-top 3rem
      padding-bottom 2rem
      .title
        color #333
        font-size 1.8rem
        line-height 1.8rem
        font-weight bold
      .tip
        font-size 1.3rem
        color #999
        margin-left 1rem
        line-height 1.3rem
      .more
        color #999
        font-size 1.3rem
        line-height 1.3rem
        float right
        position relative
        padding-right 1rem
        .arrow
          width .4rem
          position absolute
          right 0
          top .3rem
    .info-title
      padding-top 2.5rem
      padding-bottom .8rem
      font-size 1.8rem
      color #333
      font-weight bold
    .item
      border-radius .3rem
      background-color #fff
      box-sizing border-box
      .active.work
        height auto
      .work
        margin-top 2.5rem
        height 21rem
        overflow hidden
        .img
          position relative
          left 50%      
        .type-img
          width 11.8rem
          margin-left -5.9rem
          margin-bottom 2rem    
        .title
          font-size 1.5rem
          color #172F6D
          line-height 1.5rem
          height 1.5rem
          margin-bottom 1rem
          font-weight 500
        .cons
          font-size 1.3rem
          color #333
          line-height 2.4rem
          margin-bottom 1.8rem
        .energy-img
          width 18rem
          margin 4rem 0
          margin-left -9rem
        .consciousness-img
          width 13.4rem
          margin 2rem 0
          margin-left -6.7rem
      .more
        width 100%
        border-top 1px solid #e6e6e6
        height 4rem
        line-height 4rem
        text-align center
        span
          color #172F6D
          font-size 1.2rem
          display inline-block
          vertical-align middle
          font-weight 500
        img
          width 1rem
          display inline-block
          vertical-align middle
          margin-left .5rem    
  .dynamic
    margin-bottom 1rem
    .info-title
      padding-bottom 2rem
    .news
      padding 0
  .contribu
    .item
      display flex
      border-bottom 1px solid #e6e6e6
      &:last-child
        border none
      span
        flex 1
        font-size 1.5rem
        color #999
        line-height 5rem
      .name
        width 7rem
        max-width 7rem
        white-space nowrap
        text-overflow ellipsis
        overflow hidden
      .phone
        flex 2
      .price
        flex 1.5
        text-align right
        em
          color #A81E27
  .fixed
    background-color #fff
    padding .75rem 1.5rem
    position fixed
    bottom 0
    height 5.5rem
    width 100%
    box-sizing border-box
    box-shadow 1px 3px 7px rgba(0,0,0,.2)
    .btn
      line-height 4rem
      height 4rem
      width 100%
      background-color #172F6D
      color #fff
      font-size 1.5rem
      font-weight 500
      display block
      text-align center
      border-radius 100px
.vux-popup-dialog
  background-color #fff
  .title
    line-height 5.8rem
    height 5.8rem
    padding 0 1.5rem
    font-size 1.7rem
    color #333
    font-weight 500
    position relative
    img
      position absolute
      width 1.1rem
      right 1.5rem
      top 2.35rem
  .price-category
    padding 0 1.5rem
    padding-bottom 2rem
    border-bottom 1rem solid #f5f5f5
    .flex
      display flex
      margin-bottom 2rem
      .item.active
        color #172F6D
        border 1px solid #172F6D
      .item
        flex 1
        border 1px solid #ccc
        height 3.5rem
        line-height 3.5rem
        text-align center
        color #999
        font-size 1.5rem
        &:nth-child(2)
          margin 0 1rem
    .custom.active
      border 1px solid #172F6D
    .custom
      width 16.7rem
      height 3.5rem
      line-height 3.5rem
      border 1px solid #ccc
      position relative
      input
        color #333
        font-size 1.5rem
        position absolute
        width calc(100% - 4rem)
        height 100%
        outline none
        border none
        padding-left 1.6rem
        box-sizing border-box
      span
        font-size 1.5rem
        position absolute
        right 1.6rem
  .pay-mode
    height 5rem
    line-height 5rem
    overflow hidden
    padding 0 1.5rem
    border-bottom 1rem solid #f5f5f5
    .left
      font-size 1.5rem
      color #666
      float left
    .right
      float right
      color #333
      font-size 1.5rem
      position relative
      img
        position absolute
        width 2.2rem
        top 1.6rem
        left -3.2rem
  .check-agreement
    padding 2rem 1.5rem
    img
      width 1.4rem
      display inline-block
      vertical-align middle
    span
      font-size 1.2rem
      color #999
      display inline-block
      vertical-align middle
      margin-left .5rem
      em
        color #172F6D      
  .btn
    width calc(100% - 3rem)
    margin-left 1.5rem
    color #fff
    display block
    height 4rem
    line-height 4rem
    text-align center
    border-radius 100px
    margin-bottom 1rem
    background-color #999
    font-size 1.5rem
    font-weight 500
  .btn.active
    background-color #172F6D
</style>
